<template>
  <div v-if="isShow">
    <vue-office-pdf
      :src="pdf"
      style="height: 50vh; width: 50vw; overflow-y: auto"
      @rendered="renderedHandler"
    />
  </div>
  <div>
    <input type="file" @change="handleFile" />
    <vue-office-pdf
      :src="vsrc"
      v-if="isShowPdf"
      style="width: 50vw; height: 50vh; overflow-y: auto"
    />
    <button
      @click="isShowPdf = !isShowPdf"
      v-if="isShowPdf"
      style="display: block; margin-top: 10px; width: 50vw"
    >
      取消预览
    </button>
  </div>
</template>

<script setup lang="ts">
  //引入VueOfficePdf组件
  import { ref } from 'vue'
  // import VueOfficePdf from '@vue-office/pdf'
  const pdf = 'http://static.shanhuxueyuan.com/test.pdf'
  const renderedHandler = () => {
    console.log('渲染完成')
  }
  const isShow = ref(false)

  const isShowPdf = ref(false)

  const vsrc = ref()
  const handleFile = (e: any) => {
    // console.log(e)
    let file = e.target.files[0]
    if (file) {
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function () {
        // console.log(reader.result)
        vsrc.value = reader.result
      }
      isShowPdf.value = true
    }
  }
</script>
